<template>
  <el-container>
    <el-aside width="200px" style="text-align: center;">
      <h3>FireBillingBook</h3>
      <el-menu>
        <el-menu-item @click="linkToHome">
          收支记录
        </el-menu-item>
        <el-menu-item @click="linkToReport">
          报表
        </el-menu-item>
        <el-menu-item>
          数据管理
        </el-menu-item>
        <el-menu-item @click="linkToThirdParty">
          第三方数据管理
        </el-menu-item>
        <el-menu-item @click="linkToSettings">
          <i class="el-icon-setting"></i>
          <template #title>
            设置
          </template>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <div class="content">
        <router-view></router-view>
      </div>
    </el-main>
  </el-container>
</template>

<script lang="ts">
  import {
    defineComponent
  } from 'vue'
  // import HelloWorld from './components/HelloWorld.vue'

  // import RecordList from './components/RecordList.vue'
  import RecordPage from "./pages/RecordPage.vue";
  import {
    useRouter
  } from "vue-router";

  export default defineComponent({
    name: 'App',
    components: {
      RecordPage
    },
    setup() {
      const router = useRouter()
      const linkToHome = () => {
        router.push({
          path: '/'
        })
      }
      const linkToReport = () => {
        router.push({
          path: '/report'
        })
      }
      const linkToThirdParty = () => {
        router.push({
          path: '/thirdparty'
        })
      }

      const linkToSettings = () => {
        router.push({
          path: '/settings'
        })
      }

      return {
        linkToHome,
        linkToReport,
        linkToThirdParty,
        linkToSettings
      }
    }
  })
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    height: 100%;
  }

  .content {
    width: 100%;
  }
</style>